<!--光纤传感器-->
<!DOCTYPE HTML>
<html lang="cn" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <%include("/common/header.html",{title:''}){}%>
    <title>报警系统</title>
    <style>
        .layui-form-item {
            margin-bottom: 26px;
            clear: both;
        }
    </style>
</head>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=IENn7ABARjQIkTeAKyh80VTkg2jYXf3K"></script>
<body>
<div class="x-nav" style="margin: 20px auto auto 15px;">
      <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
        <a href="javascript:">报警系统</a><span lay-separator="">/</span>
        <a><cite>报警列表</cite></a>
      </span>
    <a class="layui-btn layui-btn-primary layui-btn-small" style="margin: -5px 14px 0px 0px;float:right;"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon layui-icon-refresh-3"></i>
    </a>
</div>

<div style="padding: 20px; background-color: #F2F2F2;">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <table id="LAY-user-manage" lay-filter="LAY-user-manage"></table>
                </div>
            </div>
        </div>

        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="container2" style="height: 400px;width: 100%"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="container" style="height: 400px;width: 100%"></div>
                </div>
            </div>
        </div>

    </div>
</div>

<%include("/common/foot.html"){}%>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
    $(function () {
        var dom = document.getElementById("container2");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        var colors = ['#5793f3', '#d14a61', '#675bba'];
        option = {
            title: {
                text: '各级别预警占总预警比例',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['预警1', '预警2', '预警3']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 335, name: '预警1'},
                        {value: 310, name: '预警2'},
                        {value: 234, name: '预警3'},
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option, true);

        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        var colors = ['#5793f3', '#d14a61', '#675bba'];
        option = {
            title: {
                text: '',
                subtext: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['预警1', '预警2','预警3']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '预警1',
                    type: 'bar',
                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                },
                {
                    name: '预警2',
                    type: 'bar',
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],

                },
                {
                    name: '预警3',
                    type: 'bar',
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],

                }
            ]
        };
        myChart.setOption(option, true);
    })

    layui.use(['index', 'table', 'form', 'laydate', 'layedit', 'AjaxCommon', 'AliangLayui'], function () {
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var AjaxCommon = layui.AjaxCommon;
        var AliangLayui = layui.AliangLayui;

        var title = "添加阀门信息";
        var findAll_url = 'system/valve/findAll.json';
        var update_url = 'system/valve/update.json';
        var delete_url = 'system/valve/delete.json';
        laydate.render({
            elem: '#test5'
            ,type: 'datetime'
        });
        var cols = [ //设备信息列表表头
            /*{checkbox: true, fixed: true},*/
            {field: 'zizeng', fixed: 'left',  title: '编号',type:'numbers'},
            // { title: '放置地点'},
            {field: 'number',   title: '设备名称'},
            {field: 'number',   title: '设备位置'},
            {field: 'startCommand',   title: '预警等级'},
            {field: 'endCommand',   title: '已解决/未解决按钮'},
        ];

        //设备信息列表
        AliangLayui.createTable(
            "#LAY-user-manage",
            "listReload",
            "#toolbarDemo",
            title,
            findAll_url,
            true,
            [10, 15, 20, 25],
            ['filter', 'print', 'exports'],
            cols,
            {departId:$("#departId").val()}
        );
        //初始化日期模块


        //弹出修改页面调用初始化数据方法



        //监听搜索
        form.on('submit(LAY-user-front-search)', function(data) {
            var field = data.field;
            //执行重载
            table.reload('listReload', {
                where :{
                    departName:field.departName
                },
                page: {
                    curr: 1//重新从第 1 页开始
                }
            });
        });


        //头工具栏事件
        table.on('toolbar(LAY-user-manage)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    initUpdate(0);
                    break;
                case 'delete':
                    var data = checkStatus.data;
                    if (data.length > 0) {
                        //var id = new Array(); //声明数组
                        for (var i in data) {
                            var a = data[i].id; //得到复选框的值
                            postDelete(a);
                        }
                    } else {
                        layer.msg("至少选择一个进行删除");
                    }
                    break;
                case 'export':
                    layer.msg("导出");
                    break;
            }
        });

        //点击每行右工具栏“操作”里面按钮效果
        table.on('tool(LAY-user-manage)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('删除以后数据将不能恢复，确定删除吗？', function(index) {
                    postDelete(data.id);
                });
            }else if (obj.event === 'edit') {
                initUpdate(data);
            }
        });

        //修改页面的内容提交到后台处理
        form.on('submit(component-form-element)', function (data) {
            postUpdate(data);
            return false;
        });

        //ajax提交删除内容
        window.postDelete = function (id) {
            AjaxCommon.ajax(delete_url, "post", "json", {"id": id}, function (ret) {
                if (ret == null) {
                    layer.msg("删除失败", {
                        icon: 5
                    });
                } else {
                    layer.msg(ret.msg, {time: 600, icon: 6}, function () {
                        location.replace(location.href);
                    });
                    layer.closeAll();
                    // table.reload('listReload');
                }
                return ret;
            });
        };



        //ajax提交修改内容
        window.postUpdate = function (data) {
            var formData = new FormData();
            formData.append("data", JSON.stringify(data.field));
            $.ajax({
                url: update_url,
                type: "POST",
                //traditional:true,
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    //alert(JSON.stringify(data));
                    if (data.code == 0) {
                        layer.closeAll();
                        layer.msg(data.msg, {time: 600, icon: 1}, function () {
                            location.replace(location.href);
                        });
                    } else {
                        layer.msg(data.msg, {icon: 5});
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    var estr = "Page:" + window.location.pathname + ",Function:postUpdate()";
                    layer.open({
                        title: "错误信息",
                        type: 2,
                        content: "base/error.jhtml?info=" + estr,
                        btn: ['关闭'] //可以无限个按钮
                    });
                }
            });
        }
    });

</script>

</body>

</html>
